<template>
	<view style="height: 100vh;background-color: #F9FBFC;">
		<uni-nav-bar class="bar_title" shadow left-icon="left" rightText="新增" title="设备" @clickLeft="handleHomepage()"
			@clickRight="handleAdd()" fixed/>
		<uni-search-bar :focus="true" v-model="queryParams.bdName" @confirm="getList" @blur="getList"
			@cancel="deviceCancel" placeholder="请输入设备SN/单位名称">
		</uni-search-bar>
		<view class="card-container">
			<view class="card-wrap" v-for="item in deviceList" :key="item.id" :class="getStatusClass(item.pushStatus)">
				<view class="card-header">
					<text class="unit-name">{{item.unitName}}</text>
					<view class="status-badge" :class="'status-'+item.pushStatus">
						{{getPushStatus(item.pushStatus)}}
					</view>
				</view>

				<view class="device-list">
					<view class="device-item" v-for="(val,index) in item.deviceList" :key="index">
						<!-- 设备名称 -->
						<view class="device-field">
							<uni-icons type="device" size="18" color="#666"></uni-icons>
							<text class="device-text">{{getDeviceNmaeDict(val.deviceName)}}</text>
						</view>

						<!-- 设备SN -->
						<view class="device-field">
							<uni-icons type="barcode" size="18" color="#666"></uni-icons>
							<text class="device-text">{{val.deviceCode}}</text>
						</view>

						<!-- 在线状态 -->
						<view class="device-field">
							<uni-icons type="circle-filled" size="18"
								:color="val.onlineStatus === '0' ? '#f56c6c' : '#67c23a'"></uni-icons>
							<text class="device-text" :style="{color: val.onlineStatus === '0' ? '#f56c6c' : '#67c23a'}">
								{{val.onlineStatus === '0' ? '离线' : '在线'}}
							</text>
						</view>
					</view>
				</view>

				<view class="card-footer" v-if="item.pushStatus != '2'">
					<button class="action-btn sync-btn" @click.stop="handleSort(item.id)" size="mini">
						<uni-icons type="upload" size="14" color="#fff"></uni-icons>
						<text>推送</text>
					</button>
				</view>
			</view>
			
			<!-- 加载更多组件 -->
			<uni-load-more 
				:status="loadStatus" 
				:content-text="{
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}" 
				@clickLoadMore="loadMore"
			/>
		</view>
	</view>
</template>

<script>
	import {
		addDevice,
		delDevice,
		deviceId,
		devicePush,
		deviceTypeAllList,
		listCardDevice,
		listDevice,
		updateDevice
	} from "@/api/system/device";
	import {
		listFloor,
		getFloor,
		delFloor,
		addFloor,
		updateFloor,
		floorPush
	} from "@/api/system/floor"
	export default {
		props: {
			item: {
				type: Object,
				default: () => null
			},
		},
		data() {
			return {
				deviceList: [],
				customMaintenanceUnitList: [],
				deviceNameList:[],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0, // 总条数
				loadStatus: 'more', // 加载状态：more|loading|noMore
				isLoading: false // 防止重复加载
			}
		},
		created() {
			this.getList()
			this.getdeviceName()
		},
		onReachBottom() {
			// 滚动到底部时触发
			if (this.loadStatus !== 'noMore' && !this.isLoading) {
				this.loadMore()
			}
		},
		methods: {
			async getList() {
				this.queryParams.pageNum = 1
				this.loadStatus = 'loading'
				this.isLoading = true
				
				try {
					const response = await listCardDevice(this.queryParams)
					this.deviceList = response.rows
					this.total = response.total
					
					// 判断是否还有更多数据
					if (this.deviceList.length >= this.total) {
						this.loadStatus = 'noMore'
					} else {
						this.loadStatus = 'more'
					}
				} catch (error) {
					console.error(error)
					this.loadStatus = 'more'
				} finally {
					this.isLoading = false
				}
			},
			
			async loadMore() {
				if (this.loadStatus === 'noMore' || this.isLoading) return
				
				this.isLoading = true
				this.loadStatus = 'loading'
				this.queryParams.pageNum += 1
				
				try {
					const response = await listCardDevice(this.queryParams)
					const newData = response.rows
					
					if (newData.length > 0) {
						this.deviceList = [...this.deviceList, ...newData]
					}
					
					// 判断是否还有更多数据
					if (this.deviceList.length >= this.total || newData.length < this.queryParams.pageSize) {
						this.loadStatus = 'noMore'
					} else {
						this.loadStatus = 'more'
					}
				} catch (error) {
					console.error(error)
					this.queryParams.pageNum -= 1 // 加载失败时回退页码
					this.loadStatus = 'more'
				} finally {
					this.isLoading = false
				}
			},
			
			deviceCancel() {
				this.queryParams.pageNum = 1
				this.getList()
			},
			// 分页变化
			handlePageChange(e) {
				this.queryParams.pageNum = e.current
				this.getList()
			},
			getStatusClass(status) {
				if (status == '0') {
					return 'status-warning'
				} else if (status == '1') {
					return 'status-error'
				} else if (status == '2') {
					return 'status-success'
				}
			},
			handleHomepage() {
				uni.reLaunch({
					url: '/pages/index'
				});
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/system/device/deviceAdd'
				});
			},
			getPushStatus(val) {
				if (val == '0') {
					return '未推送'
				} else if (val == '1') {
					return '推送失败'
				} else if (val == '2') {
					return '推送成功'
				} else {
					return ''
				}
			},
			handleSort(id) {
				unitPush(id).then(response => {
					this.$modal.msgSuccess("推送成功！")
					this.getList()
				})
			},
			//设备名称
			 getdeviceName() {
			    this.getDicts('device_name').then(response => {
			      this.deviceNameList = response.data || []; // 确保即使没有数据也是数组
			    }).catch(error => {
			      console.error('获取设备名称字典失败:', error);
			      this.deviceNameList = []; // 出错时设为空数组
			    });
			  },
			getDeviceNmaeDict(val){
			  const foundItem = this.deviceNameList.find(item => item.dictValue === val);
			    return foundItem ? foundItem.dictLabel : '未知设备'; // 添加默认值
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-nav-bar-text {
		font-weight: 500;
	}

	.bar_title {
		font-weight: bold;
	}

	.card-container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f7f8fa;
		padding-bottom: 20rpx;

		.card-wrap {
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 24rpx;
			transition: all 0.3s ease;
			border-left: 8rpx solid #ddd;

			&:active {
				transform: translateY(-2rpx);
				box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
			}

			&.status-success {
				border-left-color: #67c23a;

				.card-header .status-badge {
					background-color: #67c23a;
				}
			}

			&.status-warning {
				border-left-color: #e6a23c;

				.card-header .status-badge {
					background-color: #e6a23c;
				}
			}

			&.status-error {
				border-left-color: #f56c6c;

				.card-header .status-badge {
					background-color: #f56c6c;
				}
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #f1f1f1;

				.unit-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.status-badge {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					color: white;

					&.status-0 {
						background-color: #e6a23c;
					}

					&.status-1 {
						background-color: #f56c6c;
					}

					&.status-2 {
						background-color: #67c23a;
					}
				}
			}

			.device-list {
				.device-item {
					display: grid;
					grid-template-columns: 2fr 2fr 1fr;
					gap: 10rpx;
					padding: 16rpx 0;
					border-bottom: 1rpx solid #f5f5f5;
					align-items: center;

					&:last-child {
						border-bottom: none;
					}

					.device-field {
						display: flex;
						align-items: center;
						overflow: hidden;

						.device-text {
							font-size: 26rpx;
							color: #666;
							margin-left: 8rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.card-footer {
				display: flex;
				justify-content: flex-end;
				margin-top: 16rpx;
				padding-top: 16rpx;
				border-top: 1rpx solid #f1f1f1;

				.action-btn {
					display: flex;
					align-items: center;
					padding: 0rpx 50rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					background-color: #409eff;
					color: white;
					box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
					transition: all 0.2s ease;

					&:active {
						transform: scale(0.98);
						box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.3);
					}

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}
	
	/* 加载更多组件样式 */
	::v-deep .uni-load-more {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>